/* 多端响应式布局优化 */

/* 基础样式 - 所有设备适用 */
.page-container {
  width: 100% !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  margin: 0 auto !important;
}

/* 内容区域居中 - 所有设备适用 */
.content-centered {
  width: 100% !important;
  margin: 0 auto !important;
}

/* 移动端优化 (小于640px) */
@media (max-width: 639px) {
  /* 小屏幕上的功能卡片网格 */
  .feature-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* 移动端导航优化 */
  .mobile-nav-item {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
  }

  /* 表单元素适配 */
  .form-input {
    padding: 0.5rem !important;
    font-size: 0.875rem !important;
  }

  /* 按钮适配 */
  .btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
  }
}

/* 平板设备优化 (640px - 1023px) */
@media (min-width: 640px) and (max-width: 1023px) {
  .page-container {
    max-width: 90% !important;
  }

  /* 平板上的功能卡片网格 */
  .feature-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  /* 地图页面适配 */
  .map-content {
    max-width: 100% !important;
    padding: 1rem !important;
  }

  .map-sidebar {
    width: 22rem !important;
    max-width: 80% !important;
  }
}

/* 桌面设备优化 (1024px及以上) */
@media (min-width: 1024px) {
  .page-container {
    max-width: 90% !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* 功能卡片网格优化 */
  .feature-grid {
    max-width: 90% !important;
    margin: 0 auto !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2rem !important;
  }

  /* 超大屏幕优化 (1536px及以上) */
  @media (min-width: 1536px) {
    .feature-grid {
      max-width: 85% !important;
    }
  }

  /* 超宽屏幕优化 (1920px及以上) */
  @media (min-width: 1920px) {
    .feature-grid {
      max-width: 80% !important;
    }
  }

  /* 地图页面特殊处理 */
  .map-page {
    width: 100% !important;
    max-width: none !important;
  }

  .map-content {
    max-width: 1600px !important;
    margin: 0 auto !important;
  }

  .map-sidebar {
    width: 28rem !important;
  }

  }

/* 内容区域居中 - 桌面设备优化 */
.content-centered {
  max-width: 90% !important;
}

/* 超大屏幕优化 (1536px及以上) */
@media (min-width: 1536px) {
  .content-centered {
    max-width: 85% !important;
  }
}

/* 超宽屏幕优化 (1920px及以上) */
@media (min-width: 1920px) {
  .content-centered {
    max-width: 80% !important;
  }
}

/* 超大屏幕优化 (1536px及以上) */
@media (min-width: 1536px) {
  .page-container {
    max-width: 85% !important;
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
}

/* 超宽屏幕优化 (1920px及以上) */
@media (min-width: 1920px) {
  .page-container {
    max-width: 80% !important;
    padding-left: 6rem !important;
    padding-right: 6rem !important;
  }
}

/* 通用动画和过渡效果 */
.transition-all {
  transition-property: all !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 300ms !important;
}

/* 响应式字体大小 */
.text-responsive {
  font-size: clamp(1rem, 2vw, 1.5rem) !important;
}

/* 辅助类 */
.overflow-x-auto {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
